import React, { lazy, Suspense } from "react";

import { Routes, Route, Navigate } from "react-router-dom";

// import Home from "./pages/home/Index";
// import Detail from "./pages/detail/Index";
// import City from "./pages/city/Index";
// import NotFound from "./pages/notfound/Index";

const Home = lazy(() => import("./pages/home/Index"));
const Detail = lazy(() => import("./pages/detail/Index"));
const City = lazy(() => import("./pages/city/Index"));
const NotFound = lazy(() => import("./pages/notfound/Index"));

const Movies = lazy(() => import("./pages/home/movies/Index"));
const Video = lazy(() => import("./pages/home/video/Index"));
const Mini = lazy(() => import("./pages/home/mini/Index"));
const Show = lazy(() => import("./pages/home/show/Index"));
const Mine = lazy(() => import("./pages/home/mine/Index"));

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Navigate to="/home"></Navigate>}></Route>
      <Route
        path="/home"
        element={
          <Suspense>
            <Home />
          </Suspense>
        }
      >
        <Route
          path="movies"
          element={
            <Suspense>
              <Movies />
            </Suspense>
          }
        ></Route>
        <Route
          path="video"
          element={
            <Suspense>
              <Video />
            </Suspense>
          }
        ></Route>
        <Route
          path="mini"
          element={
            <Suspense>
              <Mini />
            </Suspense>
          }
        ></Route>
        <Route
          path="show"
          element={
            <Suspense>
              <Show />
            </Suspense>
          }
        ></Route>
        <Route
          path="mine"
          element={
            <Suspense>
              <Mine />
            </Suspense>
          }
        ></Route>
      </Route>
      <Route
        path="/detail"
        element={
          <Suspense>
            <Detail />
          </Suspense>
        }
      ></Route>
      <Route
        path="/city"
        element={
          <Suspense>
            <City />
          </Suspense>
        }
      ></Route>
      <Route
        path="*"
        element={
          <Suspense>
            <NotFound />
          </Suspense>
        }
      ></Route>
    </Routes>
  );
};

export default App;
